Angular Material লেআউট হল Angular Material লাইব্রেরির একটি শক্তিশালী অংশ যা UI কম্পোনেন্ট এবং লেআউট ডিজাইন তৈরি করার জন্য ব্যবহৃত হয়। এটি Material Design গাইডলাইন অনুসরণ করে এবং অ্যাপ্লিকেশনকে সহজে রেসপন্সিভ ও সুন্দরভাবে ডিজাইন করতে সহায়তা করে।

Angular Material লেআউট সিস্টেম বিভিন্ন ধরনের লেআউট কম্পোনেন্ট প্রদান করে যা ব্যবহার করে আপনি অ্যাপ্লিকেশনের গ্রিড সিস্টেম, সাইডবার, টুলবার, কার্ডস এবং স্টেপার সহ আরও অনেক কাস্টম লেআউট তৈরি করতে পারেন। Angular Material এর মাধ্যমে আপনি সহজেই একটি আধুনিক এবং রেসপন্সিভ ডিজাইন তৈরি করতে পারবেন।

Angular Material লেআউট কম্পোনেন্ট

Angular Material কিছু প্রধান লেআউট কম্পোনেন্ট সরবরাহ করে যা আপনি আপনার অ্যাপ্লিকেশনের বিভিন্ন অংশে ব্যবহার করতে পারেন। এখানে কিছু গুরুত্বপূর্ণ কম্পোনেন্টের তালিকা দেওয়া হলো:

১. MatSidenav (Sidenav)

Sidenav একটি স্লাইডআউট প্যানেল যা সাধারণত অ্যাপ্লিকেশনের সাইডবার হিসেবে ব্যবহৃত হয়। এটি ব্যবহারকারীকে অ্যাপ্লিকেশনের প্রধান কন্টেন্টের পাশাপাশি অতিরিক্ত নেভিগেশন বা কন্টেন্ট দেখানোর সুযোগ দেয়।

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened>
    <p>Sidenav content</p>
  </mat-sidenav>
  <mat-sidenav-content>
    <button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
    <p>Main content here</p>
  </mat-sidenav-content>
</mat-sidenav-container>

২. MatToolbar (Toolbar)

Toolbar হল একটি উপরের অংশের কন্টেইনার যা সাধারণত অ্যাপ্লিকেশনের টাইটেল এবং নেভিগেশন আইটেম ধারণ করে। এটি কাস্টমাইজযোগ্য এবং খুবই সহজে ব্যবহারযোগ্য।

<mat-toolbar color="primary">
  <button mat-button>Menu</button>
  <span>My App</span>
  <span class="spacer"></span>
  <button mat-button>Login</button>
</mat-toolbar>

৩. MatGridList (Grid List)

Grid List কম্পোনেন্টের সাহায্যে আপনি একটি ফ্লেক্সিবল এবং রেসপন্সিভ গ্রিড সিস্টেম তৈরি করতে পারেন। এটি সারি ও কলামে কন্টেন্ট উপস্থাপন করার জন্য উপযুক্ত।

<mat-grid-list cols="3" rowHeight="100px">
  <mat-grid-tile *ngFor="let tile of tiles">
    <img src="{{tile.img}}">
  </mat-grid-tile>
</mat-grid-list>

৪. MatCard (Card)

Card একটি কন্টেইনার উপাদান যা সাধারণত তথ্য প্রদর্শন করতে ব্যবহৃত হয়। এটি প্রোফাইল, ব্লগ পোস্ট, ইমেজ, টেক্সট ইত্যাদি উপস্থাপন করতে সাহায্য করে।

<mat-card>
  <mat-card-header>
    <mat-card-title>Card Title</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <p>Card Content</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Click</button>
  </mat-card-actions>
</mat-card>

৫. MatStepper (Stepper)

Stepper একটি প্রক্রিয়া বা ধাপভিত্তিক প্রগ্রেশন প্রদর্শন করার জন্য ব্যবহৃত হয়, যেমন ফর্ম পূরণ করা বা টাস্ক সম্পন্ন করা। এটি প্রক্রিয়ার প্রতিটি ধাপকে ভিজ্যুয়ালি উপস্থাপন করে।

<mat-horizontal-stepper>
  <mat-step label="Step 1">Step 1 Content</mat-step>
  <mat-step label="Step 2">Step 2 Content</mat-step>
  <mat-step label="Step 3">Step 3 Content</mat-step>
</mat-horizontal-stepper>

৬. MatDialog (Dialog)

Dialog কম্পোনেন্ট ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করার জন্য একটি পপ-আপ উইন্ডো প্রদর্শন করে, যেমন সতর্কতা বা তথ্য সংক্রান্ত পপ-আপ।

<button mat-button (click)="openDialog()">Open Dialog</button>
<mat-dialog-content>
  <p>Dialog content goes here.</p>
</mat-dialog-content>

৭. MatMenu (Menu)

Menu কম্পোনেন্ট সাধারণত নেভিগেশন বা অপশন মেনু হিসেবে ব্যবহৃত হয়। এটি একটি ফ্লোটিং মেনু যা ব্যবহারকারীর ইন্টারঅ্যাকশন অনুসারে দেখানো হয়।

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Option 1</button>
  <button mat-menu-item>Option 2</button>
  <button mat-menu-item>Option 3</button>
</mat-menu>

Angular Material লেআউট ব্যবহার করার সুবিধা

• রেসপন্সিভ ডিজাইন: Angular Material এর মাধ্যমে আপনি খুব সহজে রেসপন্সিভ ডিজাইন তৈরি করতে পারবেন, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে ঠিকভাবে কাজ করবে।
• সহজ কাস্টমাইজেশন: প্রতিটি লেআউট কম্পোনেন্ট কাস্টমাইজ করা যায় এবং আপনাকে আপনার প্রয়োজন অনুযায়ী সেটিংস পরিবর্তন করতে দেয়।
• ম্যাটেরিয়াল ডিজাইন অনুসরণ: Angular Material এর লেআউট কম্পোনেন্ট ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে, যা আধুনিক এবং ইউনিফর্ম ডিজাইন তৈরি করতে সহায়তা করে।
• পারফরম্যান্স এবং স্কেলেবিলিটি: Angular Material এর কম্পোনেন্টগুলো উচ্চ পারফরম্যান্সের এবং স্কেলেবিলিটির জন্য ডিজাইন করা হয়েছে।

Angular Material লেআউট কম্পোনেন্টের মাধ্যমে আপনি খুব সহজেই রেসপন্সিভ এবং আধুনিক ডিজাইন তৈরি করতে পারেন। Sidenav, Toolbar, Grid List, Card, Stepper ইত্যাদি কম্পোনেন্ট ব্যবহার করে আপনি একটি সুশৃঙ্খল এবং ব্যবহারকারী-বান্ধব UI তৈরি করতে পারবেন। Angular Material এর এসব কম্পোনেন্ট ব্যবহার করে অ্যাপ্লিকেশনের লেআউট ডিজাইন প্রক্রিয়াকে দ্রুত এবং সহজ করা যায়।

Material Grid List হল Angular Material এর একটি কম্পোনেন্ট, যা একটি গ্রিড লেআউট তৈরি করতে সহায়ক। এটি কনটেন্ট বা উপাদানগুলোকে গ্রিড আকারে প্রদর্শন করতে ব্যবহৃত হয়। Grid List ব্যবহার করে আপনি সহজেই কাস্টমাইজযোগ্য এবং রেসপন্সিভ গ্রিড লেআউট তৈরি করতে পারেন।

Angular Material এর Grid List কন্ট্রোলটি একটি শৃঙ্খলাবদ্ধ কন্টেন্ট রেন্ডারিং সিস্টেম সরবরাহ করে, যা মূলত রেসপন্সিভ এবং আকর্ষণীয় ডিভাইস ব্যবহারের জন্য উপযুক্ত।

Material Grid List এর উপকারিতা

• রেসপন্সিভ ডিজাইন: Grid List স্বয়ংক্রিয়ভাবে বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত হয়, বিশেষত মোবাইল, ট্যাবলেট এবং ডেস্কটপে।
• কাস্টমাইজেশন সুবিধা: আপনি গ্রিডের সারি, কলাম এবং সেলের আকার কাস্টমাইজ করতে পারবেন।
• সাধারণ গ্রিড লেআউট তৈরি: জটিল গ্রিড লেআউট তৈরি করার জন্য কম কোডের প্রয়োজন।

Material Grid List ব্যবহার করার ধাপ

১. Angular Material Grid List মডিউল ইমপোর্ট করা

প্রথমে, Angular Material এর Grid List মডিউল app.module.ts ফাইলে ইমপোর্ট করতে হবে:

import { MatGridListModule } from '@angular/material/grid-list';

@NgModule({
  imports: [
    MatGridListModule
  ]
})
export class AppModule { }

২. HTML ফাইলে Material Grid List ব্যবহার করা

এরপর, mat-grid-list ট্যাগটি ব্যবহার করে আপনার HTML ফাইলে Grid List তৈরি করুন। আপনি এখানে cols (কলাম সংখ্যা) এবং rowHeight (প্রতি সারির উচ্চতা) কাস্টমাইজ করতে পারেন।

<mat-grid-list cols="3" rowHeight="100px">
  <mat-grid-tile>Tile 1</mat-grid-tile>
  <mat-grid-tile>Tile 2</mat-grid-tile>
  <mat-grid-tile>Tile 3</mat-grid-tile>
  <mat-grid-tile>Tile 4</mat-grid-tile>
  <mat-grid-tile>Tile 5</mat-grid-tile>
  <mat-grid-tile>Tile 6</mat-grid-tile>
</mat-grid-list>

• cols: গ্রিডের কলামের সংখ্যা নির্ধারণ করে।
• rowHeight: প্রতি সারির উচ্চতা নির্ধারণ করে, যা আপনি পিক্সেল (px), শতাংশ (%) বা অন্য কোনো ইউনিটে সেট করতে পারেন।

৩. কাস্টমাইজড Grid Tile

এছাড়াও, আপনি প্রতিটি mat-grid-tile এর মধ্যে কন্টেন্ট যোগ করতে পারেন, যেমন ছবি, টেক্সট বা অন্য উপাদান।

<mat-grid-list cols="4" rowHeight="200px">
  <mat-grid-tile>
    <img src="path/to/image1.jpg" alt="Image 1">
  </mat-grid-tile>
  <mat-grid-tile>
    <img src="path/to/image2.jpg" alt="Image 2">
  </mat-grid-tile>
  <mat-grid-tile>
    <div class="tile-content">
      <h3>Tile 3</h3>
      <p>Description for Tile 3</p>
    </div>
  </mat-grid-tile>
</mat-grid-list>

৪. রেসপন্সিভ Grid List

আপনি যদি রেসপন্সিভ গ্রিড তৈরি করতে চান, তাহলে media queries ব্যবহার করতে পারেন অথবা cols এর মান ডাইনামিকভাবে কন্ট্রোল করতে পারেন।

<mat-grid-list [cols]="gridCols" rowHeight="200px">
  <mat-grid-tile>Tile 1</mat-grid-tile>
  <mat-grid-tile>Tile 2</mat-grid-tile>
  <mat-grid-tile>Tile 3</mat-grid-tile>
  <mat-grid-tile>Tile 4</mat-grid-tile>
</mat-grid-list>

এবং আপনার app.component.ts ফাইলে gridCols প্রপার্টি ডাইনামিকভাবে কনফিগার করুন:

export class AppComponent {
  gridCols: number;

  constructor() {
    this.setGridCols();
    window.onresize = () => this.setGridCols();
  }

  setGridCols() {
    if (window.innerWidth < 600) {
      this.gridCols = 1; // মোবাইল ডিভাইসে 1 কলাম
    } else if (window.innerWidth < 960) {
      this.gridCols = 2; // ট্যাবলেট ডিভাইসে 2 কলাম
    } else {
      this.gridCols = 4; // ডেস্কটপে 4 কলাম
    }
  }
}

Material Grid List এর অতিরিক্ত বৈশিষ্ট্য

1. Responsive Grid: মিডিয়া কোয়েরি বা ডাইনামিক কলাম সংখ্যা পরিবর্তন করে আপনি রেসপন্সিভ ডিজাইন তৈরি করতে পারবেন।
2. Tile Sizing: সেলের আকার কাস্টমাইজ করতে rowHeight এবং cols প্রপার্টি ব্যবহার করা হয়।
3. Tile Content: প্রতিটি mat-grid-tile এ কন্টেন্ট যোগ করা সম্ভব, যেমন ছবি, টেক্সট বা বিভিন্ন উপাদান।
4. Gutter Size: সেলগুলোর মাঝে স্পেস (gutter) কাস্টমাইজ করা যায় gutterSize প্রপার্টির মাধ্যমে।

<mat-grid-list cols="3" gutterSize="16px">
  <mat-grid-tile>Tile 1</mat-grid-tile>
  <mat-grid-tile>Tile 2</mat-grid-tile>
  <mat-grid-tile>Tile 3</mat-grid-tile>
</mat-grid-list>

উপসংহার

Angular Material এর Material Grid List একটি শক্তিশালী এবং রেসপন্সিভ টুল, যা গ্রিড লেআউট তৈরি করতে সহায়ক। এটি সহজেই কাস্টমাইজযোগ্য এবং দ্রুত অ্যাপ্লিকেশন ডিজাইন তৈরি করতে সাহায্য করে। আপনি এতে ছবি, টেক্সট এবং অন্য উপাদানগুলো রেখে একটি আকর্ষণীয় UI তৈরি করতে পারেন। Grid List একটি চমৎকার উপায় বিভিন্ন ধরনের কন্টেন্ট সুশৃঙ্খলভাবে প্রদর্শন করার জন্য।

Angular Flex Layout হলো একটি powerful লাইব্রেরি যা CSS Flexbox এবং CSS Grid এর উপর ভিত্তি করে রেসপন্সিভ লেআউট তৈরি করতে সহায়ক। এটি Angular অ্যাপ্লিকেশনের জন্য একটি declarative API সরবরাহ করে, যা ডেভেলপারদের সহজে এবং দ্রুত ফ্লেক্সবক্স এবং গ্রিড সিস্টেম ব্যবহার করতে সহায়তা করে। Angular Material এর সাথে ফ্লেক্স লেআউট ব্যবহারের মাধ্যমে, আপনি আপনার অ্যাপ্লিকেশনে রেসপন্সিভ এবং ডাইনামিক ডিজাইন তৈরি করতে পারবেন।

Flex Layout এর মূল ধারণা

Flexbox এবং Grid দুটি জনপ্রিয় লেআউট মডেল যা ব্রাউজারগুলিতে সহজে রেসপন্সিভ ডিজাইন তৈরি করার জন্য ব্যবহৃত হয়। Flex Layout লাইব্রেরি Angular অ্যাপ্লিকেশনে এই প্রযুক্তিগুলির সুবিধা নিয়ে আসে। Flex Layout ডিভাইস বা স্ক্রীন সাইজ অনুযায়ী অ্যাপ্লিকেশন ডিজাইন পরিবর্তন করতে সাহায্য করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

Angular Flex Layout ইন্সটল করা

এটি ব্যবহার করতে প্রথমে Angular Flex Layout লাইব্রেরিটি ইনস্টল করতে হয়। নিচের কমান্ডটি ব্যবহার করে এটি ইন্সটল করতে পারেন:

npm install @angular/flex-layout

Flex Layout Module ইমপোর্ট করা

app.module.ts ফাইলে Flex Layout মডিউল ইমপোর্ট করতে হবে:

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    FlexLayoutModule
  ]
})
export class AppModule { }

Flex Layout Directive

Flex Layout লাইব্রেরিতে Flexbox এবং Grid এর উপর ভিত্তি করে তৈরি কিছু ডিরেকটিভ আছে, যার মাধ্যমে আপনি সহজেই আপনার লেআউট কাস্টমাইজ করতে পারবেন।

১. fxLayout:

এই ডিরেকটিভটি কন্টেইনারের লেআউট নিয়ন্ত্রণ করে (যেমন, row অথবা column)।

উদাহরণ:

<div fxLayout="row" fxLayoutGap="10px">
  <div fxFlex>Item 1</div>
  <div fxFlex>Item 2</div>
  <div fxFlex>Item 3</div>
</div>

এই উদাহরণে, fxLayout="row" ডিরেকটিভ কন্টেইনারকে একটি রো লেআউট দেয় এবং fxLayoutGap="10px" ব্যবহৃত হয়েছে যাতে আইটেমগুলির মধ্যে ১০px স্পেস থাকে।

২. fxFlex:

এই ডিরেকটিভটি ফ্লেক্স আইটেমের সাইজ নিয়ন্ত্রণ করে। আপনি এটিকে সুনির্দিষ্ট প্রস্থ, উচ্চতা বা অনুপাত ভিত্তিক ব্যবহার করতে পারেন।

উদাহরণ:

<div fxLayout="row">
  <div fxFlex="25%">Item 1</div>
  <div fxFlex="50%">Item 2</div>
  <div fxFlex="25%">Item 3</div>
</div>

এখানে, fxFlex="25%" এবং fxFlex="50%" এর মাধ্যমে আইটেমগুলির প্রস্থ নিয়ন্ত্রণ করা হয়েছে।

৩. fxLayoutAlign:

এই ডিরেকটিভটি লেআউটের মধ্যে কন্টেন্টের এলাইনমেন্ট নিয়ন্ত্রণ করে। যেমন, justify-content এবং align-items এর মতো CSS বৈশিষ্ট্যগুলি সরাসরি ব্যবহার করা যায়।

উদাহরণ:

<div fxLayout="row" fxLayoutAlign="center center">
  <div fxFlex>Item 1</div>
  <div fxFlex>Item 2</div>
  <div fxFlex>Item 3</div>
</div>

এখানে, fxLayoutAlign="center center" কন্টেন্টগুলোকে কেন্দ্রিকভাবে সাজাবে।

৪. fxShow এবং fxHide:

এই ডিরেকটিভগুলি ব্যবহার করে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী কন্টেন্ট শো বা হাইড করা যায়। এটি মোবাইল, ট্যাবলেট বা ডেস্কটপের জন্য রেসপন্সিভ লেআউট তৈরি করতে ব্যবহৃত হয়।

উদাহরণ:

<div fxLayout="row">
  <div fxFlex fxShow="sm">Visible on small screens</div>
  <div fxFlex fxHide="sm">Hidden on small screens</div>
</div>

এখানে, fxShow="sm" এবং fxHide="sm" ডিরেকটিভ ব্যবহার করে ছোট স্ক্রীনে কন্টেন্ট শো বা হাইড করা হয়েছে।

Flex Layout দিয়ে রেসপন্সিভ লেআউট তৈরি করা

Angular Flex Layout এর মাধ্যমে আপনি খুব সহজেই রেসপন্সিভ লেআউট তৈরি করতে পারবেন। উদাহরণস্বরূপ, নিচে একটি অ্যাপ্লিকেশন লেআউট তৈরি করা হলো যেখানে বিভিন্ন স্ক্রীন সাইজের জন্য রেসপন্সিভ ডিজাইন ব্যবহার করা হয়েছে:

<div fxLayout="row" fxLayout.gt-xs="column" fxLayoutAlign="center center">
  <div fxFlex="30%" fxFlex.gt-sm="50%" fxFlex.gt-md="30%">
    <mat-card>Item 1</mat-card>
  </div>
  <div fxFlex="30%" fxFlex.gt-sm="50%" fxFlex.gt-md="30%">
    <mat-card>Item 2</mat-card>
  </div>
  <div fxFlex="30%" fxFlex.gt-sm="50%" fxFlex.gt-md="30%">
    <mat-card>Item 3</mat-card>
  </div>
</div>

এখানে:

• fxLayout="row": এটি ডিফল্টভাবে রো লেআউট ব্যবহার করে।
• fxLayout.gt-xs="column": ছোট স্ক্রীনে রো লেআউট পরিবর্তন হয়ে কলামে চলে যাবে।
• fxLayoutAlign="center center": আইটেমগুলোর মধ্যে সেন্টার অ্যালাইনমেন্ট প্রয়োগ করা হয়েছে।
• fxFlex দিয়ে আইটেমগুলির প্রস্থ নিয়ন্ত্রণ করা হয়েছে।

উপসংহার

Angular Flex Layout ব্যবহার করে রেসপন্সিভ লেআউট তৈরি করা Angular অ্যাপ্লিকেশনে একটি সহজ এবং শক্তিশালী উপায়। এটি Flexbox এবং Grid এর সুবিধা নিয়ে আপনার অ্যাপ্লিকেশনকে বিভিন্ন স্ক্রীন সাইজের জন্য অপ্টিমাইজ করতে সহায়তা করে। Flex Layout এর ডিরেকটিভগুলি আপনাকে ডাইনামিকভাবে লেআউট নিয়ন্ত্রণ করার সুবিধা দেয়, যা অ্যাপ্লিকেশনের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

Angular Material এমন একটি UI লাইব্রেরি যা Material Design গাইডলাইন অনুসরণ করে তৈরি। এটি রেসপন্সিভ ডিজাইনের জন্য কার্যকরী কম্পোনেন্ট এবং সরঞ্জাম প্রদান করে। Angular Material এর Breakpoints সিস্টেম ব্যবহার করে আপনি সহজেই অ্যাপ্লিকেশনের লেআউটকে বিভিন্ন স্ক্রীন সাইজে অ্যাডজাস্ট করতে পারেন, যা একটি রেসপন্সিভ এবং মোবাইল-ফ্রেন্ডলি ডিজাইন নিশ্চিত করে।

Breakpoints এবং Responsiveness

Breakpoints হলো স্ক্রীনের আকার নির্ধারণের পয়েন্ট, যেখানে লেআউটের বিভিন্ন অংশে পরিবর্তন আসে। অ্যাঙ্গুলার ম্যাটেরিয়াল CSS Media Queries ব্যবহার করে এগুলো পরিচালনা করে এবং ভিন্ন ভিন্ন সাইজের স্ক্রীনের জন্য উপযুক্ত UI উপাদান দেখায়। Angular Material রেসপন্সিভ ডিজাইন এবং লেআউট ম্যানেজমেন্টের জন্য Breakpoints এবং Grid List সিস্টেম ব্যবহার করে।

১. Angular Material এর Breakpoints

Angular Material-এর Breakpoints সিস্টেমের সাহায্যে আপনি বিভিন্ন স্ক্রীন সাইজের জন্য ডিজাইন কাস্টমাইজ করতে পারেন। Angular Material এ কিছু পূর্বনির্ধারিত Breakpoints রয়েছে, যা স্ক্রীন সাইজের উপর ভিত্তি করে লেআউট পরিবর্তন করতে ব্যবহৃত হয়:

• xs: এক্সট্রা স্মল (একক কলাম, মোবাইল ডিভাইস)
• sm: স্মল (ট্যাবলেট ডিভাইস)
• md: মিডিয়াম (ডেস্কটপ)
• lg: লার্জ (বড় স্ক্রীন)
• xl: এক্সট্রা লার্জ (বড় ডেস্কটপ)

২. Angular Material Grid List এবং Breakpoints

Angular Material এর Grid List কম্পোনেন্ট ব্যবহারের মাধ্যমে আপনি রেসপন্সিভ গ্রিড তৈরি করতে পারেন, যা বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত লেআউট প্রদান করে।

Grid List ব্যবহার করার উদাহরণ:

<mat-grid-list cols="3" rowHeight="2:1">
  <mat-grid-tile>১</mat-grid-tile>
  <mat-grid-tile>২</mat-grid-tile>
  <mat-grid-tile>৩</mat-grid-tile>
</mat-grid-list>

এখানে, cols="3" দ্বারা নির্ধারণ করা হয়েছে যে, গ্রিডে মোট ৩টি কলাম থাকবে। তবে, যখন স্ক্রীন ছোট হবে (যেমন মোবাইল ডিভাইস), তখন এটি স্বয়ংক্রিয়ভাবে ১ কলামে পরিবর্তিত হবে।

৩. Breakpoints কনফিগারেশন

আপনি চাইলে CSS Media Queries বা Angular's Layout API ব্যবহার করে নিজস্ব Breakpoints কনফিগার করতে পারেন। Angular Material এ Breakpoints কনফিগার করার জন্য @angular/flex-layout প্যাকেজ ব্যবহার করা হয়, যা ব্রেকপয়েন্টস এবং রেসপন্সিভ লেআউট সহজ করে।

উদাহরণ: Flex Layout ব্যবহার করে Breakpoints

@angular/flex-layout প্যাকেজটি ইনস্টল করার পর, এটি ব্যবহার করে আপনি রেসপন্সিভ ডিজাইন সহজেই তৈরি করতে পারবেন।

1. @angular/flex-layout ইন্সটল করা

npm install @angular/flex-layout

2. Flex Layout ব্যবহার করা

<div fxLayout="row" fxLayout.lt-md="column">
  <div fxFlex>Item 1</div>
  <div fxFlex>Item 2</div>
  <div fxFlex>Item 3</div>
</div>

এখানে:

• fxLayout="row": একাধিক উপাদানকে রূপান্তরিত করে এক লাইনে দেখায়।
• fxLayout.lt-md="column": যখন স্ক্রীনের আকার মিডিয়াম বা তার কম হবে (যেমন ট্যাবলেট বা মোবাইল), তখন উপাদানগুলো কলামে সাজানো হবে।

৪. Breakpoints ব্যবহার করে রেসপন্সিভ স্টাইলিং

এছাড়া, আপনি CSS Media Queries ব্যবহার করে রেসপন্সিভ ডিজাইন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনার অ্যাপ্লিকেশনকে আরও রেসপন্সিভ করার জন্য CSS ব্রেকপয়েন্ট যোগ করা:

@media (max-width: 600px) {
  .my-class {
    display: block;
  }
}

@media (min-width: 600px) and (max-width: 960px) {
  .my-class {
    display: flex;
  }
}

এখানে, max-width: 600px নির্দেশ করে যে স্ক্রীন যদি 600px বা তার কম হয় (যেমন মোবাইল ডিভাইস), তাহলে my-class উপাদানটি ব্লক ডিসপ্লে হবে, এবং min-width: 600px and max-width: 960px নির্দেশ করে যে স্ক্রীন যদি 600px থেকে 960px এর মধ্যে হয় (যেমন ট্যাবলেট), তখন এটি ফ্লেক্স ডিসপ্লে হবে।

Angular Material এর রেসপন্সিভিটি এবং Flex Layout

Angular Material রেসপন্সিভ ডিজাইনের জন্য Flex Layout এবং Grid List ব্যবহার করে গ্রিড, লেআউট এবং উপাদান সাইজের সাথে খুব সহজে কাজ করতে পারবেন।

• Flex Layout: এটি একটি খুব শক্তিশালী টুল যা রেসপন্সিভ লেআউট তৈরি করতে ব্যবহৃত হয়। এটি flexbox ভিত্তিক এবং ব্রেকপয়েন্ট এবং লেআউট সিস্টেম ব্যবহার করে বিভিন্ন ডিভাইসের জন্য উপযুক্ত ডিজাইন তৈরি করতে সহায়ক।
• Grid List: এটি একটি রেসপন্সিভ গ্রিড তৈরি করতে ব্যবহৃত হয়। এটি গ্রিডের কলাম সংখ্যা এবং রো-হাইট কনফিগার করার মাধ্যমে ডিভাইস অনুযায়ী উপাদানগুলোর লেআউট কনফিগার করে।

Angular Material এর Breakpoints এবং Responsiveness সিস্টেম ব্যবহার করে আপনি সহজেই রেসপন্সিভ ডিজাইন তৈরি করতে পারেন, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসের জন্য উপযুক্ত। Flex Layout এবং Grid List ব্যবহার করে রেসপন্সিভ লেআউট এবং কাস্টম ডিজাইন খুব সহজেই তৈরি করা সম্ভব, যা অ্যাপ্লিকেশনকে বিভিন্ন স্ক্রীন সাইজে সুগম এবং আকর্ষণীয় করে তোলে।

Angular Material-এ spacing, gutter এবং columns ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনে আরও পরিষ্কার, পরিপাটি এবং সুশৃঙ্খল লেআউট তৈরি করতে পারেন। এগুলো মূলত Grid System এর অংশ, যা Angular Material এর Flex Layout এবং CSS Grid সিস্টেমের উপর ভিত্তি করে কাজ করে।

Spacing, Gutter এবং Columns এর ধারণা

• Spacing: অ্যাপ্লিকেশনের উপাদানগুলির মধ্যে ফাঁকা জায়গা (মার্জিন বা প্যাডিং) সৃষ্টি করে। এটি উপাদানগুলির মধ্যে সঠিক পার্থক্য এবং আরও পরিষ্কার ও গোছানো লেআউট নিশ্চিত করে।
• Gutter: দুটি উপাদান বা কলামের মধ্যে ব্যবধান বা গ্যাপ। এটি সাধারণত সঠিক ফাঁকা জায়গা সৃষ্টি করতে ব্যবহৃত হয়, বিশেষত grid সিস্টেমে।
• Columns: লেআউটের জন্য কোলাম (বা কলাম) ব্যবহার করে আপনি উপাদানগুলিকে বিভিন্ন কলামে ভাগ করতে পারেন, যা একটি responsive লেআউট তৈরি করতে সহায়ক।

Angular Material-এ Spacing, Gutter এবং Columns ব্যবহার

Angular Material এর মাধ্যমে spacing, gutter, এবং columns ব্যবহারের জন্য Angular Flex Layout প্যাকেজটি ব্যবহার করা হয়। এটি ব্যবহারকারীকে flexbox সিস্টেমের মাধ্যমে লেআউট কাস্টমাইজ করার সুবিধা দেয়।

১. Angular Flex Layout ইনস্টল করা

প্রথমে, Angular Flex Layout প্যাকেজটি ইনস্টল করতে হবে।

npm install @angular/flex-layout

এটি ইনস্টল করার পর, আপনার app.module.ts ফাইলে এটি ইমপোর্ট করতে হবে:

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    FlexLayoutModule
  ],
  ...
})
export class AppModule { }

২. Spacing (প্যাডিং এবং মার্জিন)

Angular Material এর উপাদানগুলির মধ্যে spacing তৈরি করতে, Flex Layout এর fxLayoutGap অথবা fxLayoutAlign ব্যবহার করা যায়।

• fxLayoutGap: উপাদানগুলির মধ্যে গ্যাপ বা ফাঁকা জায়গা তৈরি করার জন্য।
• fxLayoutAlign: উপাদানগুলির অবস্থান নির্ধারণ করতে ব্যবহৃত হয়, যেমন justify-content এবং align-items।

উদাহরণ:

<div fxLayout="row" fxLayoutGap="16px">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

এখানে fxLayout="row" মানে উপাদানগুলো এক্স_axis (লাইন) এ সাজানো হবে এবং fxLayoutGap="16px" মানে উপাদানগুলোর মধ্যে ১৬px গ্যাপ থাকবে।

৩. Gutter

Gutter সাধারণত grid সিস্টেমে ব্যবহৃত হয়, যেখানে কলামের মধ্যে ফাঁকা জায়গা বা গ্যাপ নির্ধারণ করা হয়। Angular Material-এ gutter সেট করার জন্য fxLayoutGap বা CSS ব্যবহার করা যায়।

উদাহরণ:

<div fxLayout="row" fxLayoutGap="24px">
  <div class="box">Column 1</div>
  <div class="box">Column 2</div>
  <div class="box">Column 3</div>
</div>

এখানে, কলামগুলোর মধ্যে ২৪px গ্যাপ থাকবে।

৪. Columns (Flexbox Columns)

Columns ব্যবহারের মাধ্যমে আপনি উপাদানগুলো বিভিন্ন কলামে ভাগ করতে পারেন। Flex Layout এর fxFlex নির্দেশক ব্যবহার করে এটি করা সম্ভব।

উদাহরণ:

<div fxLayout="row" fxLayoutGap="24px">
  <div fxFlex="33.33%" class="box">Column 1</div>
  <div fxFlex="33.33%" class="box">Column 2</div>
  <div fxFlex="33.33%" class="box">Column 3</div>
</div>

এখানে fxFlex="33.33%" ব্যবহার করে তিনটি কলাম সমানভাবে ভাগ করা হয়েছে (প্রতিটি ৩৩.৩৩% প্রস্থ নিয়ে)।

৫. Responsive Layout (Responsive Spacing, Gutter, and Columns)

Flex Layout এর মাধ্যমে আপনি responsive লেআউট তৈরি করতে পারেন, যেখানে কলামগুলো বিভিন্ন স্ক্রীন সাইজ অনুযায়ী সাজানো হয়।

উদাহরণ:

<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px">
  <div fxFlex="50%" class="box">Column 1</div>
  <div fxFlex="50%" class="box">Column 2</div>
</div>

এখানে, lt-md মানে "medium" স্ক্রীন সাইজের নিচে (যেমন মোবাইল) এই লেআউটটি column হিসেবে সজ্জিত হবে এবং বড় স্ক্রীনে এটি row হিসেবে থাকবে।

Angular Material এবং Flex Layout ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের spacing, gutter এবং columns সিস্টেমকে কার্যকরভাবে কাস্টমাইজ করতে পারেন। এটি responsive design তৈরি করতে সহায়ক, যেখানে উপাদানগুলো বিভিন্ন স্ক্রীন সাইজ অনুযায়ী সঠিকভাবে সাজানো হবে। Flexbox সিস্টেম এবং CSS Grid সিস্টেমের মাধ্যমে স্পেসিং, গ্যাপ এবং কলাম ব্যবস্থাপনা আরও সহজ এবং প্রভাবশালী হয়ে ওঠে।